<template>
  <div class="login-page-container">
    <h1 class="title">MAX技术平台</h1>
    <el-form :model="data">
      <el-form-item>
        <el-input class="login-input"
                  prefix-icon="el-icon-user-solid"
                  v-model="data.user"
                  placeholder="用户名"
        ></el-input>
        <el-input class="login-input"
                  prefix-icon="el-icon-lock"
                  v-model="data.user"
                  placeholder="密码"
        ></el-input>
        <el-button class="input-btn"
                   type="primary"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
    <div class="session-login-oauth">
      <el-switch class="rem-password"
                 v-model="remPassword"
                 :width="44"
                 active-value="true"
                 inactive-value="false"
                 inactive-color="rgba(255, 255, 255, 0.15)"
                 active-text="记住密码"
      />
      <div class="face-spot">
        <svg xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             width="24" height="24"
             style="fill: rgba(255, 255, 255, 1);"
        >
          <path d="M9 11.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zm6 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37a9.974 9.974 0 0 0 10.41 3.97c.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
        </svg>
        <span class="title-right">人脸识别</span>
      </div>
      <div class="register">创建账号</div>
      <div class="forgot-password">忘记密码</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          user: '',
          region: '区域二'
        },
        remPassword: false
      }
    },
    methods: {
      onSubmit() {
        console.log(this.data)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "src/common/scss/variable";
  .login-page-container {
    width: 440px;
    padding: 40px;
    .title {
      margin-bottom: 80px;
      color: $color-white;
      font-size: 48px;
      text-align: center;
    }
    .login-input {
      font-size: 18px;
      /deep/.el-input__inner {
         width: 440px;
         height: 60px;
         line-height: 20px;
         border-radius: 30px;
         padding: 0 69px;
         color: $input_font_color !important;
         background-color: $input_bg_color !important;
         border: 1px solid $input_bg_color;
        &:focus {
            outline: none;
            border-color: $input_focus_color;
        }
       }
      /deep/.el-input__prefix {
        left: 24px;
      }
      & + .login-input {
        margin-top: 40px;
      }
    }
    .input-btn {
      width: 440px;
      height: 60px;
      margin-top: 40px;
      line-height: 23px;
      border-radius: 30px;
      background-color: $input_btn_color;
      color: $color-white;
      font-size: 16px;
      text-align: center;
      border: 1px solid $input_btn_color;
    }
    .session-login-oauth {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-template-rows: repeat(2, 40px);
      grid-row-gap: 20px;
      width: 100%;
      align-items: center;
      font-size: 16px;
      color: $input_font_color;
      .rem-password {
        /deep/.el-switch__label {
          color: $input_font_color;
        }
      }
      .face-spot {
        justify-self: self-end;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .register {
        cursor: pointer;
      }
      .forgot-password {
        cursor: pointer;
        justify-self: self-end;
      }
      .title-right {
        margin-left: 10px;
      }
    }
  }
</style>
